<div>
  <div id="source-container">
    <div id="nav" ng-hide="iframed">
      <div id="navheader">
        <div class="project_name" title="{{project.description}}">{{project.name}}</div>
        <div class="dropdown"><a ng-click="project_context_menu($event)">…</a></div>
      </div>
      <div id="filelist">
        <div id="file-{{$index}}" class="fileentry"
             ng-class="{selected: file == current_file}"
             ng-repeat="file in files">
          <a ng-click="set_path(file.path)" class="filename">
            {{file.path}} <i class="icon-asterisk dirtymarker" ng-show="file.dirty"></i>
          </a>
          <a class="dropdown" ng-click="file_context_menu($event, file)">…</a>
        </div>
        <div><a class='link newthing' ng-click='prompt_new_file()'>+ new file</a></div>
      </div>
    </div>

    <form class="form-inline form-reduced-margin">
      <button ng-click='run()' title='run {{project.name}}' class='btn btn-success'><i class="icon-play"></i></button>
      <span ng-hide="iframed" class="current-file-path">{{current_file.path}}</span>
      <select ng-show="iframed" ng-model="selected_path">
        <option ng-repeat="file in files">{{file.path}}</option>
      </select>
      <span class="filestatus" ng-bind="filestatus"></span>
    </form>
    <span ng-show="file == current_file" ng-repeat="file in files">
      <div ng-hide="is_image_mime_type(file.mime_type)" class="source-code" ui-codeMirror="{onChange: create_on_change_closure(file), file: file}" ng-model="file.contents"></div>
      <img ng-show="is_image_mime_type(file.mime_type)" ng-src="{{image_url_of(file)}}">
    </span>
  </div>

<br>
<br>
  <hr pg-resizer="source-container">

  <div id='output-container' class="hidden">
    <div class="alert alert-no-margin">
       If your app fails to load in the below iframe, try running your app in a
       <a ng-click='popout(); run();'>separate window</a>
    </div>
    <div class='form-inline'>
      <button ng-click='popout(); run()' class='btn'><i class="icon-resize-full"></i></button>
      <input ng-model='project.run_url' type='url' class='span8' ng-click='select_me($event)'>
    </div>
    <iframe id="output-iframe">
    </iframe>
    <hr pg-resizer="output-iframe">
  </div>


  <!-- hidden bits -->
  <div id="file-context-menu" class="context-menu" ng-show="showfilecontextmenu" pg-movable="file_context_menu_pos">
    <div ng-click="prompt_file_rename(current_file)"><b>Rename</b> <code>{{current_file.path}}</code></div>
    <div ng-click="prompt_delete_file(current_file)"><b>Delete</b> <code>{{current_file.path}}</code></div>
  </div>
  <div id="project-context-menu" class="context-menu" ng-show="showprojectcontextmenu" pg-movable="project_context_menu_pos">
    <div ng-click="prompt_project_rename(project)"><b>Rename</b> {{project.name}}</div>
    <div ng-click="prompt_delete_project(project)"><b>Delete</b> {{project.name}}</div>
  </div>
</div>
